<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<style>
    .success {
        color: springgreen;
    }

    .err {
        color: red;
    }
</style>

<body>
    <div id="app">
        <p>用户名：<input type="text" v-model="user"><span :class="myclass1">{{userSpan}}</span></p>
        <p>密&emsp;码：<input type="text" v-model="pwd"><span :class="myclass2">{{pwdSpan}}</span></p>
        <p>电&emsp;话：<input type="text" v-model="phone"><span :class="myclass3">{{phoneSpan}}</span></p>
        <p><button @click="btn">注册</button></p>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            user: "",
            pwd: "",
            phone: "",
            userSpan: "请输入6-12位字母数字或下划线且开头不为数字",
            pwdSpan: "请输入6-12位字母数字或下划线",
            phoneSpan: "请输入正确的电话格式",
            myclass1: "err",
            myclass2: "err",
            myclass3: "err",
            status: false,
        },
        methods: {
            btn() {
                if (!this.status) {
                    alert("请注意红色的提示！");
                    return false;
                } else {
                    alert("注册成功！");
                }
            }
        },
        watch: {
            user(newStr) {
                this.status = false;
                let reg = /^[a-zA-Z_]\w{5,11}$/;
                if (reg.test(newStr)) {
                    this.userSpan = "√";
                    this.myclass1 = "success";
                    this.status = true;
                } else {
                    this.userSpan = "请输入6-12位字母数字或下划线且开头不为数字";
                    this.myclass1 = "err";
                }
            },
            pwd(newStr) {
                this.status = false;
                let reg = /^\w{6,12}$/;
                var flag1 = /[A-Z]/.test(newStr) ? true : false;
                var flag2 = /[a-z]/.test(newStr) ? true : false;
                var flag3 = /[0-9]/.test(newStr) ? true : false;
                var sum = flag1 + flag2 + flag3;
                if (!reg.test(newStr)) {
                    this.pwdSpan = "请输入6-12位字母数字或下划线";
                    this.myclass2 = "err";
                } else {
                    this.status = true;
                    this.myclass2 = "success";
                    switch (sum) {
                        case 1:
                            this.pwdSpan = "密码强度:弱";
                            break;
                        case 2:
                            this.pwdSpan = "密码强度:中";
                            break;
                        case 3:
                            this.pwdSpan = "密码强度:强";
                            break;
                    }
                }
            },
            phone(newStr) {
                this.status = false;
                let reg = /^1[3-9]\d{9}$/;
                if (reg.test(newStr)) {
                    this.phoneSpan = "√";
                    this.myclass3 = "success";
                    this.status = true;
                } else {
                    this.phoneSpan = "请输入正确的电话格式";
                    this.myclass3 = "err";
                }
            }
        }

    })
</script>

</html>